<template>
	<view class="box">
		<!-- 导航栏 -->
		<view class="navbar">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="消息" @rightClick="rightClick" :autoBack="true" :bgColor="bgColor">
			</u-navbar>
		</view>
		<!-- 内容 -->
		<view class="container-steps">
			<u-steps current="0" direction="column">
				<u-steps-item title="用车申请提交成功">
					<text class="slot-icon" slot="icon">运</text>
					<view class="steps-addon" slot="desc">
						<text class="steps-time">请等待系统处理</text>
					</view>
				</u-steps-item>
				<u-steps-item title="待审核" desc="10:35">
					<text class="slot-icon" slot="icon">运</text>
					<view class="steps-addon" slot="desc">
						<text class="steps-time">请等待审核人审核</text>
						<button size="mini" @click="gtb()">沟通宝</button>
					</view>
				</u-steps-item>
				<u-steps-item title="审核通过" desc="11:40">
					<text class="slot-icon" slot="icon">运</text>
					<view class="steps-addon" slot="desc">
						<text class="steps-time">请等待系统派车</text>
					</view>
				</u-steps-item>
				<u-steps-item title="待派车" desc="11:40">
					<text class="slot-icon" slot="icon">运</text>
					<view class="steps-addon" slot="desc">
						<text class="steps-time">请等待系统处理</text>
						<button size="mini" @click="qcm()">取车码</button>
					</view>
				</u-steps-item>
				<u-steps-item title="待上车" desc="11:40">
					<text class="slot-icon" slot="icon">运</text>
					<view class="steps-addon" slot="desc">
						<text class="steps-time">司机:XXX 1111111111111</text>
					</view>
				</u-steps-item>
				<u-steps-item title="待还车" desc="11:40">
					<text class="slot-icon" slot="icon">运</text>
					<view class="steps-addon" slot="desc">
						<text class="steps-time">司机:XXX 1111111111111</text>
						<button size="mini" @click="jsxc()">结束行程</button>
					</view>
				</u-steps-item>
				<u-steps-item title="已还车" desc="11:40">
					<text class="slot-icon" slot="icon">运</text>
					<view class="steps-addon" slot="desc">
						<text class="steps-time">司机:XXX 1111111111111</text>
						<button size="mini" @click="zcsq()">再次申请</button>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'rgb(237, 241, 244)',
			};
		},
		methods:{
			gtb(){
				uni.navigateTo({
					url:"../../gtb/gtb"
				})
			},
			qcm(){
				uni.navigateTo({
					url:"../../gtb/qcm/qcm"
				})
			},
			jsxc(){
				uni.navigateTo({
					url:"../../../pages/map/map"
				})
			},
			zcsq(){
				uni.navigateTo({
					url:"../../shenqing/shenqing"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.navbar {
			height: 70px;
		}

		.container-steps {
			margin: 0 auto;
			width: 370px;
			height: auto;
			background-color: rgb(255, 255, 255)
		}
		
		u-steps-item{
			font-weight: bold;
			height: 100px;
		}

		.steps-addon {
			display: flex;
			align-items: center;
			button{
				display: flex;
				background-color: rgb(42, 87, 106);
				color: white;
				font-size: 10px;
				border-radius: 10px;
			}
		}

		.steps-time {
			margin-right: 10px;
		}
	}
</style>